<template>
  <div>
    <div v-for="(item, index) in carList" :key="item.id">
      <div>
        <van-checkbox v-model="item.check"></van-checkbox>
      </div>
      <div>
        <van-card
          :num="item.count"
          :price="item.price"
          desc="描述信息"
          :title="item.title"
          :thumb="item.img"
        >
          <template #footer>
            <van-button
              @click="delItemCount(item, index)"
              type="info"
              size="mini"
            >
              -&nbsp;</van-button
            >
            <van-button @click="addCarList({ item })" type="info" size="mini"
              >+</van-button
            >
          </template>
        </van-card>
      </div>
    </div>

    <div v-show="carList.length > 0">
      全选：<van-checkbox @change="changeFlag" v-model="flag"></van-checkbox>
    </div>

    <!-- 总价格 -->
    <van-submit-bar
      v-show="carList.length > 0"
      :style="{
        position: 'absolute',
        bottom: '50px',
        right: 0,
      }"
      :price="allPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState(["carList"]),
    ...mapGetters(["allPrice"]),
  },
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    ...mapMutations(["addCarList", "delCount", "remItem", "allCheckChange"]),
    delItemCount(item, index) {
      if (item.count > 1) {
        this.delCount({
          index,
        });
      } else {
        this.$dialog
          .confirm({
            confirmButtonText: "删除",
            message: "是否删除该商品",
          })
          .then(() => {
            this.remItem({
              index,
            });
            this.$toast.success("已取消删除");
          })
          .catch(() => {
            this.$toast("已取消删除");
          });
      }
    },
    onSubmit() {
      this.$toast("提交");
    },
    changeFlag() {
      this.allCheckChange({
        flag: this.flag
      })
    }
  },
};
</script>

<style>
</style>